<script>
export default {
    components: {},
    data() {
        return {
        
        };
    },
    computed: {},
    watch: {},
    methods: {
    
    },
    created() {
    
    },
    mounted() {
    
    },
}
</script>

<template>
    <div class="wrapper-header1">
        <img src="../../../assets/images/LOGO_FF14.png" alt="">
        <div class="ap" style="transform: scale(1.2)">确认订单信息</div>
        <div class="steps">
            <div class="stepLine"></div>
            <div class="step">
                <div class="t">
                    <div style="background-color: green;" class="big">
                        <div class="small"></div>
                    </div>
                </div>
                <div class="b">我的购物车</div>
            </div>
            <div class="step">
                <div class="t">
                    <div class="big">
                        <div class="small"></div>
                    </div>
                </div>
                <div class="b">填写核对订单</div>
            </div>
            <div class="step1">
                <div class="t">
                    <div class="big"></div>
                </div>
                <div class="b">成功提交订单</div>
            </div>
        </div>
    </div>
</template>


<style lang='scss' scoped>
.wrapper-header1 {
    padding-left: 11%;
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 7fr;
    align-items: center;
    
    img {
        width: 103px;
        height: 74px;
    }
    
    .ap {
        font-weight: 800;
        font-size: 17px;
    }
    img:hover {
        cursor: pointer;
    }
    
    .ap:hover {
        filter: brightness(1.2);
        color: #c03332;
        cursor: pointer;
    }
    
    .steps {
        width: 320px;
        height: 50px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: absolute;
        right: 20%;
        transform: scale(1.2);
        .stepLine {
            position: absolute;
            top: 30%;
            width: 67%;
            height: 2px;
            left: 15%;
            background-color: #e0e0e0;
        }
        
        .step {
            display: flex;
            row-gap: 5px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            
            .t {
                text-align: center;
                width: 15px;
                height: 15px;
                
                .big {
                    position: relative;
                    top: 2px;
                    width: 100%;
                    height: 100%;
                    background-color: #666666;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    .small {
                        width: 40%;
                        height: 40%;
                        border-radius: 50%;
                        background-color: #fff;
                    }
                }
            }
            
            .b {
                color: #666666;
                font-size: 12px;
            }
        }
        
        .step1 {
            display: flex;
            row-gap: 5px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            
            .t {
                text-align: center;
                width: 15px;
                height: 15px;
                
                .big {
                    position: relative;
                    top: 5px;
                    width: 50%;
                    height: 50%;
                    background-color: #e0e0e0;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    .small {
                        width: 40%;
                        height: 40%;
                        border-radius: 50%;
                        background-color: #fff;
                    }
                }
            }
            
            .b {
                color: #666666;
                font-size: 12px;
            }
        }
    }
}
</style>
